<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <treen :treedata="company" :is-root="true" @add="add" />
        <hr>
        <el-tree :data="list" :props="{label:'name'}" :default-expand-all="true">

          <template #default="scoped">

            <treen
              :treedata="scoped.data"
              :is-root="false"
              @add="add"
              @delDepartment="deletes"
              @edit="edit"
            />

          </template>

        </el-tree>

      </el-card>
      <adddept ref="addD" :isshow.sync="isshow" :node-date="nodeDate" @addok="getlist" />
    </div>
  </div>
</template>

<script>
import { pro } from './comPonents/prope'
import treen from './comPonents/row.vue'
import adddept from './comPonents/adddept.vue'
import { prople } from '@/api/comproy'
export default {
  components: {
    treen, adddept
  },
  data() {
    return {
      company: {
        manager: '负责人',
        name: '饿了么集团大本营',
        id: ''

      },
      list: [],
      isshow: false,
      nodeDate: {}
    }
  },
  async created() {
    // const res = (await prople()).depts
    // console.log(res)
    // this.list = pro(res, '')
    this.getlist()
  },
  methods: {
    async add(nodeDate) {
      this.isshow = true
      this.nodeDate = nodeDate
      console.log(this.nodeDate)
    },
    async deletes() {
      this.getlist()
    },
    async getlist() {
      const res = (await prople()).depts
      console.log(res)
      this.list = pro(res, '')
      this.isshow = false
    },
    async edit(v) {
      await this.$refs.addD.getdeta(v.id)
      this.nodeDate = v
      this.isshow = true
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
